<template>
    <v-app>
        <MyNavigationDrawer></MyNavigationDrawer>

        <MyAppBar></MyAppBar>

        <v-main style="position: relative">
            <component :is="currentComponent"></component>
        </v-main>
    </v-app>
</template>

<script>
    import MyAppBar from "../components/disk/layout/MyAppBar";
    import MyNavigationDrawer from "../components/disk/layout/MyNavigationDrawer";
    import All from "../components/disk/all/All";
    import Sort from "../components/disk/sort/Sort";
    import ImageList from "../components/disk/image/ImageList";
    import Collection from "../components/disk/collection/Collection";
    import Recycle from "../components/disk/recycle/Recycle";

    export default {
        name: "disk",
        created() {
            // 刷新时判断页面对应的组件
            this.switchComponent(this.$route.path);
        },
        beforeRouteUpdate(to, from, next) {
            // 点击侧边栏时判断对应的组件
            let path = to.path
            this.switchComponent(path);
            next();
        },
        components: {
            MyAppBar,
            MyNavigationDrawer,
            All,
            Sort,
            ImageList,
            Collection,
            Recycle
        },
        data() {
            return {
                currentComponent: 'All'
            }
        },
        methods: {
            switchComponent(path) {
                switch (path) {
                    case '/disk/all' :
                        this.currentComponent = 'All';
                        break;
                    case '/disk/image' :
                        this.currentComponent = 'ImageList';
                        break;
                    case '/disk/sort' :
                        this.currentComponent = 'Sort';
                        break;
                    case '/disk/collection' :
                        this.currentComponent = 'Collection';
                        break;
                    case '/disk/recycle' :
                        this.currentComponent = 'Recycle';
                        break;
                    default:
                        this.currentComponent = 'All';
                }
            }
        }
    }
</script>

<style scoped>

</style>